<template>
  <v-chart
    :theme="theme"
    :initOptions="initOptions"
    :loading="loading"
    :loadingOptions="loadingOptions"
    v-on="$listeners"
    :options="config"
    ref="map"
  />
</template>
<script>
import 'echarts/map/js/china'

import VChart from '../../Core'
import { titleTextStyle, lbLegend, lbGrid } from '../../itemDefaultConfig'

export default {
  name: 'MapChart',

  components: {
    VChart,
  },

  props: {
    data: {
      type: Array,
      default: () => [],
    },
    map: {
      type: String,
      default: 'china',
    },
    pieces: {
      type: Array,
      default: () => [],
    },
    loadingOptions: Object, // loading 状态配置项
    loading: {
      type: Boolean,
      default: false,
    },

    initOptions: Object,
    options: {
      type: Object,
      default: function() {
        return {}
      },
    },
    theme: {
      type: [String, Object],
      default: 'xm',
    },
  },

  computed: {
    config() {
      const {
        title,
        legend,
        grid,
        visualMap,
        geo,
        tooltip,
        series = [],
        ...otherConfig
      } = this.options

      const { isArray } = Array

      const option = {
        title: {
          ...titleTextStyle,
          show: this.showTitle, // title.show优先级高于showTitle
          ...title,
        },
        tooltip: {
          triggerOn: 'mousemove|click',
          ...tooltip,
        },

        visualMap: {
          left: 'center',
          top: 0,
          showLabel: true,
          orient: 'horizontal',
          inverse: true,
          pieces: this.pieces,
          show: true,
          ...visualMap,
        },
        geo: {
          map: this.map,
          top: 60,
          roam: true,
          scaleLimit: {
            min: 1,
            max: 5,
          },
          zoom: 1.1,
          label: {
            normal: {
              show: true,
              fontSize: '14',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            borderColor: 'rgba(0,0,0,.2)',
            // emphasis: {
            //   areaColor: 'red',
            //   shadowOffsetX: 0,
            //   shadowOffsetY: 0,
            //   borderWidth: 0,
            // },
          },
          ...geo,
        },
        series: series,
        ...otherConfig,
      }

      return option
    },
  },

  methods: {
    getEchartsInstance() {
      return this.$refs.map.chart
    },
  },
}
</script>
